import { useContext, useMemo } from 'react';
import { Popconfirm } from 'antd';
import DeleteIcon from '../icon/DeleteIcon';
import { InBizUploadCtx } from '../../context';
import { TextWidget, getMessage } from '@inbiz/react';
import { GlobalRegistry } from '@inbiz/core';

interface IProps {
  total: number;
  uploadStatus: string;
  onDelectAll: () => void;
}

const ListHeader = (props: IProps) => {
  const { total, uploadStatus, onDelectAll } = props;
  const { fixedHeight, readOnly } = useContext(InBizUploadCtx);
  const renderContent = useMemo(() => {
    return (
      <div
        className={
          fixedHeight
            ? 'react-fine-uploader-gallery-collect-fixed'
            : 'react-fine-uploader-gallery-collect'
        }
      >
        <span className="react-fine-uploader-gallery-collect-census">
          <TextWidget>inbizUpload.beforeUploadTotal</TextWidget>
          <span>{total}</span>
          <TextWidget>inbizUpload.afterUploadTotal</TextWidget>
        </span>
        <Popconfirm
          title={
            uploadStatus === 'loading' || uploadStatus === 'pause'
              ? getMessage('inbizUpload.isOutUpload')
              : getMessage('inbizUpload.isDelAll')
          }
          placement="bottom"
          okText={getMessage('inbizUpload.ok')}
          cancelText={getMessage('inbizUpload.cancel')}
          onConfirm={onDelectAll}
        >
          {!readOnly && (
            <div className="react-fine-uploader-gallery-collect-delectall">
              <DeleteIcon />
              <span className="react-fine-uploader-gallery-delectall-title">
                <TextWidget>inbizUpload.delAll</TextWidget>
              </span>
            </div>
          )}
        </Popconfirm>
      </div>
    );
  }, [total, uploadStatus, readOnly, GlobalRegistry.getDesignerLanguage()]);
  return renderContent;
};

export default ListHeader;
